<template>
  <div class="register-container">
    <section class="register-form-container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        autocomplete="off"
        hide-required-asterisk="true"
        size="medium"
      >
        <div class="title-container">
          <h3 class="title">机房服务管理系统注册</h3>
        </div>
        <div style="padding-top: 10px">
          <!-- 输入姓名 -->
          <el-form-item label="姓名" prop="name">
            <el-col :span="10">
              <el-input v-model="ruleForm.name" placeholder="请输入你的姓名" />
            </el-col>
          </el-form-item>
          <!-- 输入学号 -->
          <el-form-item label="学号" prop="sid">
            <el-col :span="10">
              <el-input v-model="ruleForm.sid" placeholder="请输入你的学号" />
            </el-col>
          </el-form-item>
          <!-- 输入学院 -->
          <el-form-item label="学院" prop="colloge">
            <el-select
              v-model="ruleForm.colloge"
              filterable
              placeholder="请选择你的学院"
            >
              <el-option
                v-for="colloge in ruleForm.colloges"
                :key="colloge.id"
                :label="colloge.name"
                :value="colloge.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="学院" prop="colloge">
            <el-select
              v-model="ruleForm.colloge"
              filterable
              placeholder="请选择你的学院"
            >
              <el-option
                v-for="colloge in ruleForm.colloges"
                :key="colloge.id"
                :label="colloge.name"
                :value="colloge.id"
              />
            </el-select>
          </el-form-item> -->

          <!-- 输入密码 -->
          <el-form-item label="密码" prop="pwd">
            <el-col :span="10">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="ruleForm.pwd"
                type="password"
                placeholder="请输入密码"
                tabindex="1"
                auto-complete="new-password"
                @keyup.enter.native="handleLogin"
              />
            </el-col>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item label="确认密码" prop="cpwd">
            <el-col :span="10">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="ruleForm.cpwd"
                type="password"
                placeholder="请再次输入密码"
                tabindex="2"
                auto-complete="new-password"
                @keyup.enter.native="handleLogin"
              />
            </el-col>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              @click="register"
            >注册</el-button>
          </el-form-item>
          <span class="login">
            <em class="bold">已有账号？</em>
            <a href="/login">
              <el-button type="primary" size="mini">登录</el-button>
            </a>
          </span>
        </div>
      </el-form>
    </section>

    <div class="error">{{ error }}</div>
  </div>
</template>

<script>
import { encrypt } from '@/utils/rsaEncrypt'

export default {
  name: 'Register',
  data() {
    return {
      statusMsg: '',
      error: '',
      isDisable: false,
      codeLoading: false,
      ruleForm: {
        name: '',
        sid: '',
        pwd: '',
        cpwd: '',
        colloges: [
          {
            id: '计算机科学与工程学院/软件学院',
            name: '计算机科学与工程学院/软件学院'
          },
          {
            id: '文学院 / 新闻与传播学院',
            name: '文学院 / 新闻与传播学院'
          },
          {
            id: '马克思主义学院',
            name: '马克思主义学院'
          },
          {
            id: '政治与公共管理学院',
            name: '政治与公共管理学院'
          },
          {
            id: '教育学部/ 教师教育学院 （田家炳教育书院）',
            name: '教育学部/ 教师教育学院 （田家炳教育书院）'
          },
          {
            id: '美术学院',
            name: '美术学院'
          },
          {
            id: '数学与统计学院',
            name: '数学与统计学院'
          },
          {
            id: '化学与药学学院',
            name: '化学与药学学院'
          },
          {
            id: '环境与资源学院',
            name: '环境与资源学院'
          },
          {
            id: '体育与健康学院',
            name: '体育与健康学院'
          },
          {
            id: '职业技术师范学院',
            name: '职业技术师范学院'
          },
          {
            id: '国际文化教育学院',
            name: '国际文化教育学院'
          },
          {
            id: '历史文化与旅游学院',
            name: '历史文化与旅游学院'
          },
          {
            id: '法学院/律师学院',
            name: '法学院/律师学院'
          },
          {
            id: '经济管理学院',
            name: '经济管理学院'
          },
          {
            id: '外国语学院',
            name: '外国语学院'
          },
          {
            id: '音乐学院',
            name: '音乐学院'
          },
          {
            id: '物理科学与技术学院',
            name: '物理科学与技术学院'
          },
          {
            id: '生命科学学院',
            name: '生命科学学院'
          },
          {
            id: '电子与信息工程学院/集成电路学院',
            name: '电子与信息工程学院/集成电路学院'
          },
          {
            id: '设计学院',
            name: '设计学院'
          }
        ]
      },
      rules: {
        name: [
          {
            required: true,
            type: 'string',
            message: '请输入你的姓名',
            trigger: 'blur'
          }
        ],
        sid: [
          {
            required: true,
            type: 'string',
            message: '请输入你的学号',
            trigger: 'blur'
          }
        ],
        col: [
          {
            required: true,
            message: '请选择你的学院',
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入你的密码',
            trigger: 'blur'
          },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{8,20}$/,
            message: '密码必须同时包含数字、字母以及特殊字符,且长度为 8-20位'
          }
        ],
        cpwd: [
          {
            required: true,
            message: '请确认你的密码',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.ruleForm.pwd) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 用户注册  --
    // 注意，用户返回的姓名学号密码等信息还没有详细的写！这个还不清楚应该如何去写。
    register: function() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.$store.dispatch('user/register', this.ruleForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
            this.$message({
              showClose: true,
              message: '注册成功!',
              type: 'success'
            })
          }).catch(() => {
            this.loading = false
          })
          this.$router.push({ name: 'login' })
        } else {
          this.codeLoading = false
          this.$message({
            showClose: true,
            message: '注册失败，请检查信息是否填写完整！',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .register-container .el-input input {
    color: $cursor;
  }
}
.register-container .el-form-item__label {
  text-align: center;
  color: #fff; /* 设置文字颜色为白色 */
}
/* reset element-ui css */
.register-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 95%;

    input {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      -webkit-appearance: none;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.register-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../assets/Login-background3.jpg");

  .header {
    border-bottom: 2px solid rgb(235, 232, 232);
    min-width: 1000px;
    color: #666;

    header {
      margin: 0 auto;
      padding: 10px 0;
      width: 980px;

      .login {
        float: right;
        margin: 10px;
      }

      .bold {
        font-style: normal;
        color:  $bg;
      }
    }
  }

  .register-form-container {
    width: 520px;
    height: auto;
    border-radius: 15px;
    border: 1px solid #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(52, 64, 105, 0.5); /* 设置背景颜色和透明度 */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    .status {
      font-size: 12px;
      margin-left: 20px;
      color: #e6a23c;
    }

    .error {
      color: red;
    }
    .login {
      float: right; /* 使<a>标签内的el-button靠右 */
    }

    .login a {
      display: inline-block; /* 使<a>标签表现为内联块级元素，可以设置宽度和垂直对齐 */
      /* 其他样式，如宽度、对齐等 */
    }
    .bold {
      font-style: normal;
      color:  #fff;
    }
    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 20px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
  }

  .el-input {
    width: 380px; /* 设置输入框的宽度为300像素 */
  }
  .el-select {
    width: 400px; /* 设置输入框的宽度为300像素 */
  }

  .tips {
    float: right;
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
}
</style>

<style scoped>
/* 修改验证器样式 */
.el-form-item.is-error .el-input__inner {
  border-color: #889aa4;
}
.el-form-item.is-error .el-input__validateIcon {
  color: #889aa4;
}
.el-form-item__error {
  color: #e6a23c;
}
</style>
